<template>
    <div class="e-input-main" :class="required ? 'required': ''">
        <input class="e-input" type="text" :style="{width: width  + 'px', height: height  + 'px'}"
               :placeholder="placeholder" :disabled="disabled"
               v-model="input" @input="inputChanged($event)"
        >
        <div class="input-tips" v-if="tips">
            {{tips}}
        </div>
    </div>
</template>

<script>
    export default {
        name: "EInput",
        data() {
            return {
                input: this.inputValue
            }
        },
        props: {
            placeholder: {
                type: String || Number,
                default: ''
            },
            required: {
                type: Boolean,
                default: true
            },
            width: {
                type: Number,
                default: 260
            },
            height: {
                type: Number,
                default: 40
            },
            tips: {
                type: String,
                default: ''
            },
            disabled: {
                type: Boolean,
                default: false
            },
            inputValue: {
                type: String,
                default: ''
            }
        },
        watch: {
            inputValue(newValue) {
                this.input = newValue
            }
        },
        methods: {
            inputChanged: function ($event) {
                this.$emit("inputChanged", this.input) //将值放在自定义的事件函数中作为参数
            }
        }
    }
</script>

<style lang="less" scoped>
    .e-input-main {
        .flexed(flex-start);
        margin-left: 20px;
        
        .e-input {
            position: relative;
            background: rgba(0, 0, 0, .04);
            border-radius: 4px;
            border: none;
            outline: none;
            padding-left: 16px;
        }
        
        .e-input::-webkit-input-placeholder {
            font-size: 14px;
            font-weight: bold;
            color: rgba(0, 0, 0, .4);
        }
        
        .e-input::-moz-placeholder {
            font-size: 14px;
            font-weight: bold;
            color: rgba(0, 0, 0, .4);
        }
        
        .e-input:-ms-input-placeholder {
            font-size: 14px;
            font-weight: bold;
            color: rgba(0, 0, 0, .4);
        }
        
        .e-input:-webkit-autofill {
            -webkit-box-shadow: 0 0 0 1000px white inset;
            -webkit-text-fill-color: #333;
        }
        
    }
    
    .input-tips {
        margin-left: 30px;
        font-size: 12px;
        font-weight: bold;
        color: rgba(224, 32, 32, 1);
        line-height: 17px;
    }
    
    .required {
        position: relative;
    }
    
    .required::before {
        position: absolute;
        top: 18px;
        left: -20px;
        content: '';
        display: block;
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: rgba(250, 100, 0, 1);
    }
</style>
